<!--  -->
<template>
  <div >  

        <div class="panel-group" id="panelContainer">
                <div class="panel panel-default">
                    <div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer">
                        <i class="glyphicon glyphicon-list-alt"></i>
                        <a href="#">作业</a>
                        <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                    </div>
                    <div id="sub1" class="collapse panel-collapse">
                        <div class="panel-body">
                            <ul class="nav">
                                <li>
                                    <a href="#">未提交作业</a>
                                </li>
                                <li>
                                    <a href="#">已截止作业</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer">
                        <i class="glyphicon glyphicon-leaf"></i>
                        <a href="#">实验</a>
                        <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                    </div>
                    <div id="sub2" class="collapse panel-collapse">
                        <div class="panel-body">
                            <ul class="nav">
                                <li>
                                    <a href="#">已完成</a>
                                </li>
                                <li>
                                    <a href="#">未完成</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer">
                        <i class="glyphicon glyphicon-leaf"></i>
                        <a href="#">考试</a>
                        <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                    </div>
                    <div id="sub2" class="collapse panel-collapse">
                        <div class="panel-body">
                            <ul class="nav">
                                <li>
                                    <a href="#">进行中</a>
                                </li>
                                <li>
                                    <a href="#">已结束</a>
                                </li>
                                
                            </ul>
                        </div>
                    </div>
                </div>
        </div>


  </div>
</template>

<script>
   
export default
{
  data () 
  {
    return {};
  },

  components: {},

  computed: {},

  methods: {}
}

</script>

<style  scoped>

	a,a:hover,a:focus{
				color: #ffffff;
				text-decoration: none;
			}
			.panel-group {
				background-color: #404040;
				width: 250px;
				height: 750px;
				overflow-y: auto;
			}
			.panel-group .panel {
				background-color: #404040;
				border: none;
			}
			
			.panel-heading{
				border-top-left-radius: 0px; 
    			border-top-right-radius: 0px; 
			}
			.panel-default>.panel-heading {
				border: none;
				color: #ffffff;
				background-color: #505050;
			}
			.panel-default>.panel-heading>span{
				font-size: 10px;
			}
			.panel-default>.panel-heading:active,.panel-default>.panel-heading:hover{
				background-color: #4a8bc2;
			}
			.panel-default>.panel-heading>a:hover{
				text-decoration: none;
				background-color: #4a8bc2;
			}
			.panel-group .panel-heading+.panel-collapse>.panel-body {
				border: none;
			}
			.panel-body {
				padding: 0px;
			}
			.nav>li{
				padding: 1px 0px 0px 0px;
			}
			.nav>li>a{
				text-decoration: none;
				padding: 10px 10px 10px 35px;
			}
			.nav>li>a:hover,.nav>li>a:focus{
				background-color: #505050;
			}
</style>